<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>

    <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
    <script src="https://www.layuicdn.com/auto/layui.js"></script>    
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
</head>
<style>
.grade {margin:50px;}
.layui-card {background:#f6f6f6;}
.layui-card-header {background:#080;color:#fff;}
</style>
<body>

<span class="box">
  <span id="sort-down" class="layui-btn">由高到低</span>
  <span id="sort-up" class="layui-btn focus">由低到高</span>
</span>

<div class="grade" id="sort-box">
      <div class="layui-card">
        <div class="layui-card-header school">测试小学</div>
        <div class="layui-card-body limit">
          <span class="slide" style="width:70%;">&nbsp;</span>
          <span class="percent">70%</span>
        </div>
      </div>

      <div class="layui-card">
        <div class="layui-card-header school">测试小学</div>
        <div class="layui-card-body limit">
          <span class="slide" style="width:60%;">&nbsp;</span>
          <span class="percent">60%</span>
        </div>
      </div>

      <div class="layui-card">
        <div class="layui-card-header school">测试小学</div>
        <div class="layui-card-body limit">
          <span class="slide" style="width:30%;">&nbsp;</span>
          <span class="percent">30%</span>
        </div>
      </div>

      <div class="layui-card">
        <div class="layui-card-header school">测试小学</div>
        <div class="layui-card-body limit">
          <span class="slide" style="width:80%;">&nbsp;</span>
          <span class="percent">80%</span>
        </div>
      </div>

      <div class="layui-card">
        <div class="layui-card-header school">测试小学</div>
        <div class="layui-card-body limit">
          <span class="slide" style="width:30%;">&nbsp;</span>
          <span class="percent">30%</span>
        </div>
      </div>
    </div>





</body>
</html>

<script>
$(function() {
    //降序排列
    $('body').on('click','#sort-down', function(){
        var domList = $('#sort-box .layui-card').get();
        domList.sort(function(a,b){
            var elOne = $(a).find('.percent').text();
            var elTwo = $(b).find('.percent').text();
            if(elOne > elTwo) return 1;
            if(elOne < elTwo) return -1;
            return 0;
        });
        $('#sort-box').append(domList)
    });
    //升序排列
    $('body').on('click','#sort-up', function(){
        var domList = $('#sort-box .layui-card').get();
        // console.log(domList)
        domList.sort(function(a,b){
            var elOne = $(a).find('.percent').text();
            var elTwo = $(b).find('.percent').text();
            if(elOne > elTwo) return -1;
            if(elOne < elTwo) return 1;
            return 0;
        });
        console.log(domList)
        $('#sort-box').append(domList)
    });
});
</script>